<template>
  <comcard>
    <div slot="title_name" class="nav">
      <div>商品分类</div>
      <el-button type="danger" class="qqq" @click="dialogFormVisible = true"
        >添加分类</el-button
      >
    </div>
    <div slot="body_name">
      <el-table :data="dataSouce" style="width: 100%">
        <el-table-column prop="id" label="序号" width="180"> </el-table-column>
        <el-table-column prop="cateName" label="分类名称" width="180">
          <template slot-scope="scope">
            <div v-if="scope.row.isOpen">
              <el-input type="text" v-model="scope.row.cateName"></el-input>
            </div>
            <div v-else>
              {{ scope.row.cateName }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="state" label="是否启用">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.stateSwich"
              active-color="#13ce66"
              inactive-color="#ff4949"
            ></el-switch>
          </template>
        </el-table-column>

        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              :type="scope.row.isOpen ? 'danger' : 'primary'"
              @click="update(scope.row)"
              >{{ scope.row.isOpen ? "完成" : "编辑" }}</el-button
            >
            <el-button type="danger" @click="del(scope.row.id)">删除</el-button>
            <el-button type="warning" @click="upd(scope.row)"
              >弹窗修改</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <el-row>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="searchObj.currentPage"
          :page-sizes="[2, 4, 6, 8]"
          :page-size="searchObj.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </el-row>

      <el-dialog title="添加分类" :visible.sync="dialogFormVisible">
        <el-form size="small" :model="formObj">
          <el-form-item label="分类名称：" label-width="100px">
            <el-input type="text" v-model="formObj.cateName"></el-input>
          </el-form-item>
          <el-form-item label="是否启用：" label-width="100px">
            <el-switch
              v-model="formObj.state"
              active-color="#13ce66"
              inactive-color="#ff4949"
            ></el-switch>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false" size="small"
            >取 消</el-button
          >
          <el-button type="primary" @click="save()" size="small"
            >确 定</el-button
          >
        </div>
      </el-dialog>
    </div>
  </comcard>
</template>

<script>
import comcard from "../../components/comcard/index.vue";
import { api_query, api_add, api_del, api_update } from "../../api/goods.js";
export default {
  components: {
    comcard,
  },

  data() {
    return {
      formObj: {
        id: "",
        cateName: "",
        state: 1,
      },

      dialogFormVisible: false,

      total: 0,
      dataSouce: [],

      searchObj: {
        currentPage: 1,
        pageSize: 6,
      },
    };
  },
  mounted() {
    this.query();
  },
  methods: {
    //弹窗修改
    upd(val) {
      this.dialogFormVisible = true;
      let { id, cateName, state } = val;
      this.formObj = { id, cateName, state };
    },

    //渲染表格
    async query() {
      let rst = await api_query(this.searchObj);
      console.log(rst);
      let { data, total } = rst;
      let arr = [];
      data.forEach((item) => {
        item.stateSwich = item.state == 1 ? true : false;
        item.isOpen = false;
        arr.push(item);
      });
      this.dataSouce = arr;
      this.total = total;
      if (this.dataSouce.length == 0) {
        if (this.searchObj.currentPage > 1) {
          this.searchObj.currentPage--;
          this.query();
        }
      }
    },
    //添加分类
    async save() {
      if (this.formObj.id) {
        let rst = await api_update(this.formObj);

        console.log(rst);
      } else {
        let rst = await api_add(this.formObj);

        console.log(rst);
      }

      this.dialogFormVisible = false;
      this.clear();
      this.query();
    },
    clear() {
      this.formObj = {
        cateName: "",
        state: 1,
        id: "",
      };
    },

    //编辑
    async update(aa) {
      if (aa.isOpen) {
        let rst = await api_update({
          id: aa.id,
          cateName: aa.cateName,
          state: aa.stateSwich,
        });
        console.log(rst);
      }
      aa.isOpen = !aa.isOpen;
    },
    //删除
    del(id) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(async () => {
        this.$message({
          type: "success",
          message: "删除成功!",
        });
        let rst = await api_del({ id });
        console.log(rst);
        this.query();
      });
    },
    //分页
    handleSizeChange(val) {
      this.searchObj.pageSize = val;
      this.query();
    },
    handleCurrentChange(val) {
      this.searchObj.currentPage = val;
      this.query();
    },
  },
};
</script>

<style lang="less" scoped>
.nav {
  display: flex;
  .qqq {
    margin-left: 800px;
  }
}
</style>